<template>
<SubLayout :breadcrumb="false"  @refresh="() => {}" :showRefresh="false">
    <template #bread>
      <router-link to><span @click="router.go(-1)">界面审批</span></router-link>
      <el-icon class="route-icon"> <arrow-right /> </el-icon>
    </template>
    <template #default>
      <!-- 详情 -->
      <InfoArea :data="dataInfo" />
    </template>
    <template #footer>
      <footer v-if="dataInfo.status === 0">
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="red"
          title="你确定要取消本次的审批内容吗?"
          @confirm="goBack"
        >
          <template #reference>
            <el-button>取消</el-button>
          </template>
        </el-popconfirm>
        <el-button type="primary" :loading="buttonLoading" @click="submit"
          >审批</el-button
        >
      </footer>
    </template>
  </SubLayout>
  <!-- <div class="container">
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle> 【{{ dataInfo.name }}】 </template>
    </Header>
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar :showBack="true" @route="goBack" />
      </div>
 
      <InfoArea :data="dataInfo" />
    </div>
  </div> -->
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import { ArrowRight } from '@element-plus/icons-vue'
import SubLayout from '@/components/SubLayout';
import InfoArea from "../components/Info.vue";
import { InfoFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getTagListById } from '@/utils'
import { aprrove, getDetail } from "@/api/webview-register";
export default defineComponent({
  name: "MeansCascadeDetail",
  components: {
    InfoArea,
    SubLayout,
    ArrowRight
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const route = useRoute()
    const goBack = () => {
      router.back()
    }

    
    const buttonLoading = ref(false)

    const submit = async() => {
      ElMessageBox.confirm('请提交您的审批意见', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '拒绝',
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(({ value }) => {
          sendApprove(1, value)
        })
        .catch((action) => {
          if (action === 'cancel') {
            sendApprove(2)
          }
        })
      
      
    }
    const sendApprove = async(status = 1, auditText = '') => {
      buttonLoading.value = true
      const para = { status, auditText }
      const res = await aprrove(dataInfo.value.id, para)
      buttonLoading.value = false
      if(res.status === 200) {
        goBack()
      }
    }
    const dataInfo = ref({})
    const getInfo = async() => {
      const res = await getDetail(route.params.id)
      res.data.tagNames = res.data.guiTag?getTagListById(res.data.guiTag):''
      dataInfo.value = res.data
    }
    onMounted(() => {
      getInfo();
    });

    return {
      InfoFilled,
      dataInfo,
      buttonLoading,
      router,
      goBack,
      submit
    };
  },
});
</script>
<style lang="scss" scoped>
.page-main {
  position: relative;
  padding-bottom: 70px;
}

footer {
  text-align: right;
  margin-top: 20px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 70px;
  padding: 0 20px;
  line-height: 70px;
  background: #fff;
}
</style>